<template>
	<view class="page flex-col">
		<cu-custom bgColor="bg-gradual-red" id="cu-custom" :isBack="true">
			<block slot="content">拍卖会详情</block>
		</cu-custom>
		<view class="img_wapBox">
			<image class="image" :src="$getFileAccessHttpUrl(auctionData.auctionCover)" mode="aspectFill"></image>
		</view>
		<view class="detailcontent">
			<view class="title">
				{{auctionData.auctionName}}
			</view>

			<view class="textlabel">
				<view class="box">{{noticeData.categoryText}}</view>
				<view class="box">{{auctionData.auctionWayText}}</view>
				<view class="right">
					<view class="example-body">
						<uni-fav :checked="auctionData.interestId != null ? !checkList : checkList"
							:content-text="contentText"
							@click="favClick(auctionData.interestId != null ? !checkList : checkList)" />
					</view>
				</view>
			</view>
			<view class="text">
				<view class="lable">{{auctionData.startTime}} 开始</view>
			</view>
			<!-- <view class="text">
				拍卖地点：{{noticeData.auctionAddress}}
			</view>
			<view class="text">
				发布媒体：中国商网<view>联系方式：{{noticeData.contactBy}}{{noticeData.contactNumber}}</view>
			</view> -->
			<view class="text" v-if="auctionData.applyAll == 1 ">
				<view>全场报名费：{{auctionData.applyCost}}元</view>
			</view>
			<view class="text" v-if="auctionData.warrantyAll == 1 ">
				<view>全场保证金：{{auctionData.warrantyCost}}元</view>
			</view>
			<view class="text" v-if="auctionData.warrantyTime != '' && auctionData.warrantyTime != null ">
				<view>保证金截至时间：{{auctionData.warrantyTime}}</view>
			</view>
			
			<!-- <view class="content">
				<rich-text :nodes="noticeData.contents"></rich-text>
			</view> -->
		</view>
		<view class="bidding">
			<view class="borderwidth"></view>
			<view class="notice">拍卖公告</view>
			<view class="content">
				<rich-text :nodes="introduce"></rich-text>
			</view>
		</view>
		<view class="scrollnav">
			<view class="title">
				<image class="image" src="/static/home/128/lu.png" mode="widthFix"></image>
				<view class="h6">标的物</view>
			</view>
		</view>
		<view class="spacebox">
			<view class="scrollDabox">
				<scroll-nav :style="{top:navHeight+'px'}"
					:class="[hightTop == 1 && scrollshow ? 'topnavFixed' : '', 'space-around']" :brands="brands"
					@tabtap="tabtap" ref='brands'></scroll-nav>
			</view>
			<!-- 显示区域 -->
			<view class="uni-tab-bar">
				<swiper class="swiper-box" :style="[{height: swiperHeight+ 'px'}]" :current="tabIndex"
					@change="tabChange">
					<swiper-item v-for="(items,index) in loopData" :key="index">
						<scroll-view scroll-y class="scrolllist">
							<template v-if="items.list.length > 0">
								<!-- 图文列表 -->
								<block>
									<view class="section1 flex-col">
										<view class="Body flex-col">
											<view class="bd2 flex-col justify-between">
												<view class="box3 flex-col">
													<view class="group1 flex-col" v-for="(item, index1) in items.list"
														:key="index1" @click="godetail(item.id)">
														<view class="outer1 flex-row justify-between">
															<view class="box4 flex-col">
																<image class="box5 flex-col"
																	:src="$getFileAccessHttpUrl(item.icon)"
																	mode="aspectFill"></image>
															</view>
															<view class="box6 flex-col  justify-between">
																<view class="TextGroup1 flex-col">
																	<view class="txt2">{{item.itemName}}</view>
																	<view class="wordbox">
																		<view class="word3">报名费：</view>
																		<view class="word1">{{item.applyCost}}</view>
																		<view class="word3 margin-left">保证金：</view>
																		<view class="word1">{{item.earnestMoney}}</view>
																	</view>
																	<view class="wordbox"
																		v-if="item.status == 2 || item.status == 3 || item.status == 4 || item.status == 5">
																		<view class="word3"
																			v-if="item.status == 2 || item.status == 5">
																			当前价：</view>
																		<view class="word3" v-if="item.status == 3">
																			成交价：</view>
																		<view class="word3" v-if="item.status == 4">
																			最高价：</view>
																		<view class="word1">
																			{{item.status == 3 ? item.closingPrice : item.currentPrice}}
																		</view>
																		<view class="word2">
																			{{item.biddingNum}}次出价
																		</view>
																	</view>
																	<view class="timeout"
																		v-if="item.status == 1 || item.status == 5">
																		<view class="outer2 flex-col">
																			<view class="word5" v-if="item.status == 1">
																				未开始
																			</view>
																			<view class="word5" v-if="item.status == 5">
																				暂停中
																			</view>
																		</view>
																		<!-- <view class="word4">{{liveCountdown}}</view> -->
																		<view class="word4"
																			v-if="item.status != 6 && item.showtime != ''">
																			{{item.showtime == '00天00时00分01秒' ? auctionlist() : item.showtime}}
																		</view>

																	</view>
																</view>

															</view>
														</view>
														<view v-if="item.status == 1 && ! applyTime && !item.hasApply"
															class="righbom" @click.stop="clickauction(2,item.id)">
															<view class="circle">报名</view>
														</view>
														<view v-if="item.hasApply" class="righbom active">
															<view class="circle">已报名</view>
														</view>
														<!-- <view class="box">
																	<view class="rolled"></view>
																</view> -->
													</view>
												</view>
											</view>
										</view>

									</view>
								</block>
							</template>

						</scroll-view>

					</swiper-item>

				</swiper>
				<empty v-if="loopData[tabIndex].list.length == 0"></empty>
			</view>

		</view>

		<!-- 全场拍 -->
		<view class="unisection" @click.stop="clickauction(1)"
			v-if="!applyTime && !auctionData.hasApply && auctionData.applyAll && ifhasApply">
			<view class="fidxe">
				全场报名
			</view>
		</view>

		<!-- 竞拍须知 -->
		<uni-popup ref="Biddingpopup" type="bottom" :mask-click="true">
			<view class="scortop">
				<view class="title">竞拍须知</view>
				<uni-icons type="close" size="30" @click="compcloseBidding"></uni-icons>
			</view>
			<view class="scrollbox">
				<view class="titlecontent">
					<view class="example">
						<rich-text :nodes="instructions"></rich-text>
					</view>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button type="warn" class="cu-btn bg-blue lg shadow" :disabled="!stand"
					@click="understand">同意{{ stand ? '' : agreeTime + 's'}}</button>
			</view>
		</uni-popup>

		<!-- 拍卖会报名 -->
		<uni-popup ref="bottompopup" type="bottom" :mask-click="true">
			<view class="scortop">
				<view class="title">报名</view>
				<uni-icons type="close" size="30" @click="compclose"></uni-icons>
			</view>
			<view class="scrollbox">
				<view class="titlecontent">
					<view class="example">
						<!-- 自定义表单校验 -->
						<uni-forms ref="customForm" :rules="rules" :modelValue="formDataSignup">
							<!-- <uni-forms-item label="是否全场报名" required name="applyAll">
								<uni-data-checkbox v-model="formDataSignup.applyAll" :localdata="applyAll" />
							</uni-forms-item> -->

							<uni-forms-item label="名称" required name="companyName">
								<uni-easyinput class="unieasyinput" v-model="formDataSignup.companyName"
									placeholder="请输入公司/个人名称" />
							</uni-forms-item>
							<uni-forms-item label="联系方式" required name="contactPhone">
								<uni-easyinput class="unieasyinput" type="number" v-model="formDataSignup.contactPhone"
									placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="联系人" required name="contactUser">
								<uni-easyinput class="unieasyinput" v-model="formDataSignup.contactUser"
									placeholder="请输入联系人" />
							</uni-forms-item>
							<uni-forms-item label="邮箱" required name="email">
								<uni-easyinput class="unieasyinput" v-model="formDataSignup.email"
									placeholder="请输入邮箱" />
							</uni-forms-item>
							<uni-forms-item label="是否需要报名费发票" required name="needBill">
								<uni-data-checkbox v-model="formDataSignup.needBill" :localdata="needBill" />
							</uni-forms-item>
							<view v-if="needBillShow">
								<uni-forms-item label="邮寄地址" required name="deliveryAddress">
									<uni-easyinput v-model="formDataSignup.deliveryAddress" placeholder="请输入邮寄地址" />
								</uni-forms-item>
								<uni-forms-item label="税号" required name="taxNo">
									<uni-easyinput v-model="formDataSignup.taxNo" placeholder="请输入税号" />
								</uni-forms-item>
								<uni-forms-item label="发票抬头" required name="titleName">
									<uni-easyinput v-model="formDataSignup.titleName" placeholder="请输入发票抬头" />
								</uni-forms-item>
							</view>


						</uni-forms>
					</view>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg shadow" @click="submit">提交</button>
			</view>
		</uni-popup>
		<!-- 付款弹框 -->
		<uni-popup ref="popupcenter" class="popupcenter" type="bottom" :mask-click="true">
			<view class="scortop">
				<view class="title">付款二维码</view>
				<uni-icons type="close" size="30" @click="compclosepopupcenter"></uni-icons>
			</view>
			<view class="padding poputchan">
				<view class="">长按识别二维码(点击打开长按保存)</view>
			</view>
			<view>
				<!-- 二维码 -->
				<view class="qr-box">
					<canvas canvas-id="qrcode" @click.stop="photoPreview(urlCode,0)"
						style="width: 300rpx;margin: 0 auto;" />
					<image hidden :src="urlCode" mode="aspectFill"></image>
				</view>
			</view>
			<view class="padding poputchan">
				<view class="" style="color: red;">{{orderMessage}}</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		USER_INFO
	} from "@/common/util/constants"
	import uQRCode from '@/common/util/uqrcode' //引入uqrcode.js
	import scrollNav from '../../pages/component/scrollNav.vue'
	import server from '@/api/server.js'
	import {
		decryption
	} from '@/common/util/aesEncrypt'
	export default {
		components: {
			scrollNav,
		},
		data() {
			return {
				urlCode: '',
				orderMessage: '',
				applyTime: true,
				brands: [
					'待竞拍',
					'竞拍中',
					'竞拍成功',
					'流拍',
				],
				swiperHeight: 500, //高度
				tabIndex: 0,
				rules: {
					// applyAll: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择报名，不能为空！',
					// 	}, ]
					// },
					companyName: {
						rules: [{
							required: true,
							errorMessage: '请输入公司/个人名称！',
						}, ]
					},
					contactPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式！',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1[3456789]\d{9}$/;
								if (!iphoneReg.test(value)) {
									callback('联系方式格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					contactUser: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人！',
						}, ]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱！',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
								if (!email.test(value)) {
									callback('邮箱格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					deliveryAddress: {
						rules: [{
							required: true,
							errorMessage: '请输入邮寄地址！',
						}, ]
					},
					taxNo: {
						rules: [{
							required: true,
							errorMessage: '请输入税号！',
						}, ]
					},
					titleName: {
						rules: [{
							required: true,
							errorMessage: '请输入发票抬头！',
						}, ]
					},
					// needBill: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择是否需要发票！',
					// 	}, ]
					// },

				},
				// 单选数据源
				needBill: [{
					text: '否',
					value: 0
				}, {
					text: '是',
					value: 1
				}],
				applyAll: [{
					text: '否',
					value: 0
				}, {
					text: '是',
					value: 1
				}],
				formDataSignup: {
					applyAll: 0,
					needBill: 0,
					companyName: '',
					contactPhone: '',
					contactUser: '',
					email: '',
				},
				loopData: [{
						list: []
					},
					{
						list: []
					},
					{
						list: []
					},
					{
						list: []
					},
					{
						list: []
					},
				],

				auctionData: {},
				noticeData: {},
				introduce: '',
				listData: [],
				gettime: '',
				stand: false,
				agreeTime: 1,
				instructions: '',
				shoptype: 1,
				auctionId: '',
				needBillShow: false,
				userId: '',
				interval: null,
				checkList: false,
				contentText: {
					contentDefault: '关注',
					contentFav: '已关注'
				},
				userInfo: {},
				myScroll: '',
				className: false,
				liveCountTimes: null,
				navHeight: '',
				hightTop: 0,
				wmssjH: '',
				scrollshow: false,
				getQrOrderNo: '',
				ifhasApply:true,
			};
		},
		watch: {
			'formDataSignup.needBill': { //全场
				handler(newName, oldName) {
					if (newName == 1) {
						this.needBillShow = true
					} else {
						this.needBillShow = false
					}
					console.log(newName)
				},
				immediate: true
			}
		},

		onLoad() {

		},
		onShow() {
			this.$store.commit('SUBJECT_RETURN', [])
			this.$store.commit('SUBJECT_NEXT', [])
			this.userId = uni.getStorageSync(USER_INFO).id
			console.log('this.userId', this.userId)
			this.apiauctiondetail(this.$root.$mp.query.auctionId) //头部信息


			var that = this
			//跳转了页面回来后重新获取
			//重新获取的需求是比如你要固定的元素上面某个元素会根据字段做显示隐藏
			try {
				const storage_apiauctiondetail = uni.getStorageSync("storage_apiauctiondetail");
				if (storage_apiauctiondetail) {
					this.auctionData = storage_apiauctiondetail.auction //拍卖会信息
					this.noticeData = storage_apiauctiondetail.notice //公告信息
					//报名截止时间
					this.gettime = this.auctionData.startTime
				}
				const storage_apiitemlist = uni.getStorageSync("storage_apiitemlist");
				if (storage_apiitemlist) {
					storage_apiitemlist.forEach((item, index) => {
						var obj = {}
						if (item.status == 1) {
							this.loopData[0].list.push(item)
						} else if (item.status == 2 || item.status == 5) {
							this.loopData[1].list.push(item)
						} else if (item.status == 3) {
							this.loopData[2].list.push(item)
						} else if (item.status == 4) {
							this.loopData[3].list.push(item)
						} else if (item.status == 0) {
							this.loopData[4].list.push(item)
						}
						if(item.hasApply == true){
							this.ifhasApply = false
						}
						
					})
				}
			} catch (e) {
				//错误
				console.log('错误', e)
			}
		},
		//在进入页面onLoad()或者onReady()获取元素距离顶部的值
		onReady() {
			// this.query()
		},
		mounted() {


		},
		beforeDestroy() {
			console.log("this.liveCountTimes", '22222222222222222222222222222')

			clearInterval(this.liveCountTimes)
			this.liveCountTimes = null;
			clearInterval(this.timeurlCode)
			this.timeurlCode = null;
		},
		methods: {
			query() {
				var that = this
				//这里获取的是你要固定的元素上个元素的高度和它距离顶部的高度值
				const query = uni.createSelectorQuery().in(this);
				//    query.select('.spacebox').boundingClientRect(data => {
				//       //data.height获取元素高度值  data.top获取距离顶部的值
				//    this.wmssjH = data.top+data.height
				//    }).exec();


				var wmssjH = 0
				query.select('#cu-custom').boundingClientRect(data => {
					console.log('cu-custom', data.height)
					wmssjH += data.height
					that.navHeight = data.height
				}).select('.img_wapBox').boundingClientRect(data => {
					console.log('img_wapBox', data.height)
					wmssjH += data.height
				}).select('.detailcontent').boundingClientRect(data => {
					console.log('detailcontent', data.height)
					wmssjH += data.height
				}).select('.bidding').boundingClientRect(data => {
					console.log('bidding', data.height)
					wmssjH += data.height
				}).select('.scrollnav').boundingClientRect(data => {
					console.log('scrollnav', data.height)
					wmssjH += data.height
					that.wmssjH = wmssjH
					console.log('that.wmssjH', that.wmssjH)
				}).exec();




			},
			imgerror(e, img_index) {
				console.log(e, 'e')
				console.log(img_index, 'img_index')
				if (this.loopData[this.tabIndex].list.length > 0) {
					this.loopData[this.tabIndex].list[img_index].icon = "/static/home/128/loadfail.png"
				}
			},
			compclosepopupcenter() {
				this.$refs.popupcenter.close()
				this.getQrOrderNo = ''
			},
			//图片预览保存
			photoPreview(data, index) {
				let photoList = []
				photoList.push(data)
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			onuserInfo() {
				console.log('123123123213')
				this.userInfo = uni.getStorageSync(USER_INFO)
				console.log('userInfo', this.userInfo)
				server.getEncryptedString().then(res => {
					this.formDataSignup.companyName = this.userInfo.userType == 1 ? this.userInfo.company : this
						.userInfo.userName
					this.formDataSignup.contactPhone = decryption(this.userInfo.phone, res.data.result.key, res
						.data.result.iv)
					this.formDataSignup.contactUser = this.userInfo.userName
					this.formDataSignup.email = decryption(this.userInfo.email, res.data.result.key, res.data
						.result.iv)
				})

			},
			//滚动位置
			onPageScroll(e) {
				let that = this
				// console.log(that.navHeight + that.wmssjH,e.scrollTop)
				//判断你滑动的高度大于你元素距离顶部的高度值
				if (that.wmssjH < e.scrollTop) {
					//固定
					that.hightTop = 1
				} else {
					that.hightTop = 0
				}

			},
			favClick(bol) {
				console.log(bol)
				let api;
				let obj = {}
				if (bol) {
					api = server.interestdelete
					obj = {
						id: this.auctionData.interestId
					}
				} else {
					api = server.interestadd
					obj = {
						objectId: this.$root.$mp.query.auctionId,
						type: 1
					}
				}

				api(obj).then(res => {
					console.log(res)
					if (res.data.success) {
						this.$tip.toast(bol ? '已取消关注' : '关注成功')
						this.apiauctiondetail(this.$root.$mp.query.auctionId)
					} else {
						this.$tip.error(res.data.message)
					}
				})
				this.$forceUpdate()
			},
			submit(ref) {

				this.$refs.customForm.validate().then(res => {

					if (this.shoptype == 1) {
						res.applyAll = 1
						res.auctionId = this.$root.$mp.query.auctionId
					} else {
						res.applyAll = 0
						res.auctionItemId = this.auctionId
						res.auctionId = this.$root.$mp.query.auctionId
					}
					console.log('success', res);
					console.log('formDataSignup', this.formDataSignup);
					server.applyadd(res).then(res => {
						console.log(res)
						if (res.data.success) {
							this.$tip.success('报名成功')
							this.loopData[0].list = []
							this.apiitemlist() //标物
							this.$refs.bottompopup.close()
							if (res.data.result != true) {
								// this.requestPayment(res.data.result)
								this.$refs.popupcenter.open('top')
								let urlCode = res.data.result.code_url
								this.qrFun(urlCode)
								that.timeurlCode = setInterval(function() {
									console.log('getCurrentSwiperHeigh1111', 234567654321234567)
									that.apiapplyqueryOrder(that.getQrOrderNo)
								}, 2000)
								// code_url
							}
						} else {
							this.$tip.error(res.data.message)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			//查询订单
			apiapplyqueryOrder(orderNo) {
				server.applyqueryOrder({
					orderNo: orderNo
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						if (res.data.code == 301) { //支付中
							this.orderMessage = res.data.message
						} else if (res.data.code == 200) { //成功
							clearInterval(this.timeurlCode)
							this.timeurlCode = null;
							this.compclosepopupcenter()
							this.$tip.success(res.data.message)
							this.apiitemlist()
						}
					} else {
						this.orderMessage = res.data.message
					}
				})
			},
			//**生成二维码**//
			qrFun(urlCode) {
				let that = this
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: urlCode,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						that.urlCode = res
					}
				})
			},
			//了解竞拍须知
			understand() {
				this.compcloseBidding()
				this.$refs.bottompopup.open('top')
			},
			compclose() {
				this.$refs.bottompopup.close()
			},
			compcloseBidding() {
				this.$refs.Biddingpopup.close()
				this.clearInterval()
			},
			//清除定时器
			clearInterval() {
				clearInterval(this.interval)
				this.interval = null;
				this.agreeTime = 10
				this.stand = true
			},
			getCode() {
				server.instructionsquery().then(res => {
					console.log(res, '111111')
					this.stand = false
					if (res.data.success) {
						if(res.data.result != null){
							this.instructions = res.data.result.replace(
									/<div([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<div')
								.replace(/<div>/ig, '<div style="font-size: 20px; line-height: 25px;">')
								.replace(/<p/gi, '<p style="text-indent:0!;"')
								.replace(/<img/gi,
									'<img style="text-indent:0!important;height:200px!important;width:200px!important;"')
							
						}
						this.interval = setInterval(() => {
							let times = --this.agreeTime
							this.agreeTime = times < 10 ? '0' + times : times //小于10秒补 0
							if (times == 0) {
								this.clearInterval()
							}
						}, 1000)
					} else {
						this.$tip.error(res.data.message)
					}

				})

			},
			clickauction(type, id) {
				this.shoptype = type
				this.auctionId = id
				let obj = {}
				if (type == 1) {
					obj.auctionId = this.$root.$mp.query.auctionId
				} else {
					obj.auctionItemId = id
					obj.auctionId = this.$root.$mp.query.auctionId
				}
				server.applycheckApply(obj).then(res => {
					console.log(res, '111111222')
					if (res.data.success) {
						this.$refs.Biddingpopup.open('top')
						this.onuserInfo() //默认报名信息   
						this.getCode()
					} else {
						this.$tip.error(res.data.message)
					}

				})

			},
			auctionlist() {
				this.apiitemlist()
				// this.gonexttick()
			},
			apiitemlist() {
				let that = this
				let obj = {
					auctionId: this.$root.$mp.query.auctionId
				}
				if (this.userId != undefined) {
					obj.bidderId = this.userId
				}
				server.itemlist(obj).then(res => {
					console.log(res)
					this.loopData[0].list = []
					this.loopData[1].list = []
					this.loopData[2].list = []
					this.loopData[3].list = []
					var listData = res.data.result
					listData.forEach((item, index) => {
						var obj = {}
						if (item.status == 1) {
							this.loopData[0].list.push(item)
						} else if (item.status == 2 || item.status == 5) {
							this.loopData[1].list.push(item)
						} else if (item.status == 3) {
							this.loopData[2].list.push(item)
						} else if (item.status == 4) {
							this.loopData[3].list.push(item)
						} else if (item.status == 0) {
							this.loopData[4].list.push(item)
						}
					})
					// brands: [
					// 	'待竞拍',
					// 	'竞拍中',
					// 	'竞拍成功',
					// 	'流拍',
					// ],

					this.$forceUpdate()
					//本地存储
					try {
						uni.setStorageSync('storage_apiitemlist', listData)
					} catch (e) {
						//错误
					}
					this.gonexttick()

					console.log(this.loopData)
				})

			},
			gonexttick() {
				let that = this
				that.$nextTick(function() {
					let brands = []
					brands[0] = '待竞拍' + '(' + that.loopData[0].list.length + ')'
					brands[1] = '竞拍中' + '(' + that.loopData[1].list.length + ')'
					brands[2] = '竞拍成功' + '(' + that.loopData[2].list.length + ')'
					brands[3] = '流拍' + '(' + that.loopData[3].list.length + ')'

					console.log('this.brands[0]', brands)

					// that.$refs.brands.activeTopTemp = brands
					if (that.auctionData.auctionStatus == 2) {
						that.tabtap(0)
					} else if (that.auctionData.auctionStatus == 4 || that.auctionData.auctionStatus == 5) {
						that.tabtap(1)
					} else if (that.auctionData.auctionStatus == 1 || that.auctionData.auctionStatus == 0) {
						that.tabtap(4)
						brands[4] = '待提交' + '(' + that.loopData[4].list.length + ')'
					} else {
						that.tabtap(2)
					}
					that.brands = brands
					console.log('setInterval', 11111111111111111)
					that.query()
					that.liveCountTimes = setInterval(function() {
						that.getLiveTimeCount(that.loopData[that.tabIndex].list)
					}, 1000)
					that.getCurrentSwiperHeight('.scrolllist');
					that.$forceUpdate()
				})
				// this.liveCountTimes = setInterval(function() {

				// 	console.log('setInterval',11111111111111111)
				// 	that.getLiveTimeCount(that.loopData[that.tabIndex].list)
				// 	that.getCurrentSwiperHeight('.scrolllist');
				// }, 300)
			},
			//标的物详情页
			godetail(id) {
				console.log(this.loopData[this.tabIndex].list, '[[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]]')
				var arr = this.loopData[this.tabIndex].list.concat()
				this.$store.commit('SUBJECT_NEXT', arr) //将待竞拍列表存储进存储状态里
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/page_myauction/subjectdetail/subjectdetail?id=' + id + '&auctionId=' +
						this.$root.$mp.query.auctionId + '&showye=' + true
				})
				clearInterval(this.liveCountTimes)
				this.liveCountTimes = null;
			},
			getLiveTimeCount(data) {
				let that = this
				//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
				var data = data
				data.forEach((item) => {
					var replaceTime = this.gettime
					let transedPreTime = replaceTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let nowTime = new Date().getTime(); //获取当前时间毫秒数
					let preTime = new Date(transedPreTime).getTime() //处理好格式之后获取结束时间的毫秒数
					let obj = null;
					if (preTime - nowTime > 0) {
						let time = (preTime - nowTime) / 1000;
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						obj = {
							day: day < 10 ? '0' + day : day,
							hou: hou < 10 ? '0' + hou : hou,
							min: min < 10 ? '0' + min : min,
							sec: sec < 10 ? '0' + sec : sec
						};
						item.showtime = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
						// console.log(item.showtime,'12345678')
					} else {
						// obj = {
						// 	day: '00',
						// 	hou: '00',
						// 	min: '00',
						// 	sec: '00'
						// };
						item.showtime = ''
					}
				})
				this.loopData[this.tabIndex].list = data
				this.$forceUpdate();
			},

			//详情内容
			apiauctiondetail(id) {
				let obj = {
					auctionId: id
				}
				if (this.userId != undefined) {
					obj.bidderId = this.userId
				}
				server.auctiondetail(obj).then(res => {
					console.log(res)
					this.auctionData = res.data.result.auction //拍卖会信息
					this.noticeData = res.data.result.notice //公告信息
					if(res.data.result.notice.contents != null){
						this.introduce = res.data.result.notice.contents.replace(
								/<div([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<div')
							.replace(/<div>/ig, '<div style="font-size: 20px; line-height: 25px;">')
							.replace(/<p/gi, '<p style="text-indent:0!;"')
							.replace(/<img/gi,
								'<img style="text-indent:0!important;height:200px!important;width:200px!important;"')
						
					}

					//报名截止时间
					this.gettime = this.auctionData.startTime
					//本地存储
					try {
						uni.setStorageSync('storage_apiauctiondetail', res.data.result)
					} catch (e) {
						//错误
					}
					this.auctionlist() //标物
					console.log(this.$public.bjDate(this.auctionData.applyTime, this.$public.getNowTime()))
					this.applyTime = this.$public.bjDate(this.auctionData.applyTime, this.$public.getNowTime())

				})

			},
			// 获取内容高度
			getCurrentSwiperHeight(element) {
				// clearInterval(this.liveCountTimes);
				// this.liveCountTimes = null;
				if (element == undefined) {
					element = '.scrolllist'
				}
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					this.swiperHeight = res[0][this.tabIndex].height;
					this.scrollshow = true
					console.log('that.scrollshow', this.scrollshow)
				})
			},
			//滑动切换导航
			tabChange(e) {
				this.tabIndex = e.detail.current;
				this.$refs.brands.handleScroll(this.tabIndex)
				this.getCurrentSwiperHeight()
			},
			tabtap(index) {
				this.tabIndex = index;
				this.getCurrentSwiperHeight()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.img_wapBox {
		overflow: hidden;
		height: 80px;
		padding-bottom: 56.25%;
		position: relative;
		width: 100%;
		overflow: hidden;
		float: left;

		.image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			object-fit: cover;
			-webkit-transition: all 0.5s;
			-o-transition: all 0.5s;
			transition: all 0.5s;
		}
	}

	.detailcontent {
		background-color: white;
		padding: 0 10px 10px 20px;
		width: 100%;
		float: left;

		.textlabel {
			width: 100%;
			float: left;
			margin-bottom: 5px;

			.right {
				float: right;
			}

			.box {
				border: 1px solid #B81D22;
				float: left;
				font-size: 10px;
				border-radius: 4px;
				padding: 2px 4px;
				color: #B81D22;
			}

			.box:nth-child(1) {
				margin-right: 5px;
			}
		}

		.title {
			font-size: 18px;
			font-weight: bold;
			margin: 10px 0;
			line-height: 28px;
		}

		.text {
			font-size: 14px;
			line-height: 28px;
			color: #666666;
			float: left;
			width: 100%;

			view {
				display: inline-block;
			}

			.lable {
				font-size: 16px;
				display: flex;

				.image {
					width: 25px;
					padding: 0;
					margin: 0;
					height: 25px;
					vertical-align: middle;
				}
			}
		}

		.content {
			text-indent: 2em;
			line-height: 22px;
			font-size: 14px;
			letter-spacing: 1px;
			margin-top: 10px;
			float: left;
			width: 100%;

			p {
				line-height: 22px;
				font-size: 14px;
				letter-spacing: 2px;
			}
		}

	}

	.bidding {
		position: relative;
		float: left;
		width: 100%;
		background: #FBFBFB;
		padding: 0 10px 10px 10px;

		.borderwidth {
			width: 70%;
			height: 1px;
			position: absolute;
			top: 13px;
			left: 50%;
			margin-left: -35%;
			background-color: #e3e0e0;
		}

		.notice {
			background: #FBFBFB;
			font-size: 16px;
			position: absolute;
			left: 50%;
			width: 86px;
			margin-left: -38px;
			height: 20px;
			line-height: 20px;
			top: 4px;
			text-align: center;
			color: #999;
			font-weight: bold;
		}

		.content {
			padding-top: 30px;
		}
	}

	.scrollnav {
		float: left;
		width: 100%;
		background-color: white;
		padding: 10px;

		.title {
			display: flex;
			align-items: center;
			font-size: 18px;

			.image {
				width: 14px;
				height: 14px;
			}

			.h6 {
				margin-left: 5px;
			}
		}
	}

	.unisection {
		position: fixed;
		right: 2px;
		bottom: 20%;
		background: white;
		font-size: 16px;
		background-color: #B81D22;
		padding: 8px 2px;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;

		.fidxe {
			color: white;
			writing-mode: vertical-lr;
		}
	}

	.righbom {
		@keyframes twinkling {
			0% {
				opacity: 0.2;
				filter: alpha(opacity=20);
				transform: scale(1);
			}

			50% {
				opacity: 0.5;
				filter: alpha(opacity=50);
				transform: scale(1.12);
			}

			100% {
				opacity: 0.2;
				filter: alpha(opacity=20);
				transform: scale(1);
			}
		}


		.circle {
			height: 30px;
			border-radius: 50%;
			background: #cc595c;
			text-align: center;
			font-weight: bold;
			position: relative;
			line-height: 30px;
			z-index: 1;
		}

		.circle::before {
			background: inherit;
			content: '';
			position: absolute;
			width: 30px;
			height: 30px;
			left: 0;
			top: 0;
			z-index: -2;
			border-radius: 50%;
			animation: twinkling 2.2s ease-in-out infinite;
		}

		.circle::after {
			background: inherit;
			content: '';
			position: absolute;
			width: 35px;
			height: 35px;
			left: -5%;
			top: -5%;
			z-index: -1;
			border-radius: 50%;
			animation: twinkling 2.2s ease-in-out infinite;
		}

		&.active {
			background-color: white;
			color: #B81D22;
			border: 1px solid #B81D22;

			.circle {
				background: unset;
			}
		}
	}

	.uni-transition .scrollbox {
		height: 400px;
	}

	.scrollDabox {
		height: 45px;
		float: left;
		width: 100%;
	}

	.topnavFixed {
		background: #fff;
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 999;
	}
</style>
